<template>
	<view class="car-count">
		<view class="u-status-bar"></view>
		<view class="cart_font">
			<text>购物车</text>
			<text @click="deletegoods" v-if="run" class="cart_text1">管理</text>
			<text @click="deletegoods" v-else class="cart_text1">完成</text>
		</view>
		<view class="inner">
			<view class="car-list" v-if="cartlist.length>0">
				<view class="body_bottom_2" v-for="(itm,gIndex) in cartlist" :key="gIndex">
					<text @click="selThis(gIndex)" class="iconfont cart_left" :class="itm.selected==1?'car-sel':'car-unsel'"></text>
					<image :src="itm.goods_img"></image>
					<view class="car-right">
						<view class="car-right-top">
							<view class="u-line-1">{{itm.goods_name}}</view>
							<text class="bot_two_name" v-if="itm.item_name">{{itm.item_name}}</text>
						</view>
						<view class="car-right-bot">
							<view class="bot_bot_one">￥<text>{{(itm.goods_price*itm.goods_num).toFixed(2)}}</text></view>
							<view class="cart_add">
								<u-number-box 
								button-size="26"
								bgColor="#00000000"
								v-model="itm.goods_num" 
								@change="valChange($event,gIndex)" 
								:name="gIndex" 
								:max="itm.max"
								:disabled="itm.disabled==1">
								</u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="goods_list">
				<view class="u-empty-container">
					<u-empty text="购物车内还没有内容" :icon="emptyIcon">
						<u-button @tap='goIndex' size="small" type="error" class="chooseBtn" text="去逛逛">
						</u-button>
					</u-empty>
				</view>
				<view class="goods_list_text2" v-if="user_id">猜您喜欢</view>
				<view class="body_flex">
					<custom-waterfalls-flow
					ref="waterfallsFlowRef" 
					:value="goodslist" 
					imageKey="goods_img"
					:column="column" 
					:columnSpace="1.5" 
					:seat="2" 
					:listStyle="{'box-shadow':'0 0 30rpx rgba(0, 0, 0, 0.1)'}"
					@wapperClick="wapperClick" 
					@imageClick="wapperClick">
						<!-- #ifdef MP-WEIXIN -->
						<view class="body_5" v-for="(item, index) in goodslist" :key="index" slot="slot{{index}}">
							<text class="body_5_text">{{item.goods_name}}</text>
							<text class="bot_5_one">￥{{item.goods_price}}</text>
							<text class="bot_5_two">￥{{item.market_price}}</text>
						</view>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<template v-slot:default="item">
							<view class="body_5">
								<text class="body_5_text">{{item.goods_name}}</text>
								<text class="bot_5_one">￥{{item.goods_price}}</text>
								<text class="bot_5_two">￥{{item.market_price}}</text>
							</view>
						</template>
						<!-- #endif -->
					</custom-waterfalls-flow>
				</view>
			</view>
		</view>
		<view class="bottom_settle" v-if="cartlist.length>0">
			<view class="bottom_settle_div1" @click="allSelBtn" style="flex: 1;">
				<text class="iconfont" :class="allSel==true ? 'car-sel':'car-unsel'"></text>
				<text class="all-text">全选</text>
			</view>
			<view v-if="btnType">
				<text class="bottom_settle_text">合计：</text>
				<text class="bottom_settle_text2">￥</text>
				<text class="bottom_settle_text3">{{allAmount}}</text>
			</view>
			<view class="bottom_settle_div2" v-if="btnType">
				<text @tap="orderto">结算</text>
			</view>
			<view class="bottom_settle_div3" v-else>
				<view class="show_fixed_right">
					<button type="default" class="btn1" @tap="openConfirm(1)">移至收藏夹</button>
					<button type="default" class="btn2" @tap="openConfirm(2)">删除</button>
				</view>
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="5"
			:overlay="true" :customStyle="customStyle1" @close="show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">{{customTit}}</text>
				<view class="u-popup-slot_flex">
					<u-button type="success" text="取消" @tap="show = !show" class="btn1">
					</u-button>
					<u-button type="success" text="确认" @tap="deleteConfirm()" class="btn2">
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		CartList,
		EditSel,
		DelCart,
		MoveCart,
		EditNum,
		IndexGoods
	} from '@/config/api.js';
	export default {
		data() {
			return {
				// #ifdef VUE3
				column:ref(2),
				// #endif
				// #ifdef VUE2
				column: 2,
				// #endif
				emptyIcon:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				carList: [],
				maskTitle: '',
				allSel: false,
				allAmount: '0.00',
				allNumber: 0,
				delIds: '', //要删除的购物车id
				btnType: 1, //0删除  1结算
				run: true,
				goodslist: [],
				cartlist: [],
				disabled: false,
				show: false,
				customTit: '确认删除?',
				delType:1,//1移至收藏夹2删除
				customStyle1: {'width':'80%'},
			};
		},
		onLoad() {
		},
		onShow() {
			if (this.user_id>0) {
				this.getcartlist();
			} else {
				this.getgoodslist();
			}
		},
		methods: {
			//点击去逛逛
			goIndex(){
				this.$u.route({
					url: "pages/index/index",
					type: "switchTab"
				})
			},
			//获取购物车商品列表
			async getcartlist() {
				const data = await CartList();
				this.cartlist = data.data.cartlist
				if(this.cartlist == 0){
					this.goodslist = data.data.goods
				}else{
					this.setAllSel()
					this.getAllMount()
				}
			},
			//获取推荐商品
			async getgoodslist() {
				const params = {
					pageIndex: 1,
					pageSize: 20,
					is_cart:1
				}
				const data = await IndexGoods(params)
				this.goodslist = data.data.goods
			},
			confirm() { //确定按钮
				var that = this;
				console.log('您点击了确定按钮');
				if (that.btnType == 0) {
					that.$emit('delbtn', that.delIds, that.carList);
				} else {
					let ids = that.getCarIds();
					this.$emit('jsbtn', ids)
				}
			},
			cancel() { //取消按钮
				console.log('您点击了取消按钮');
			},
			jsCars() {
				var that = this;
				that.btnType = 1;
				that.$refs.askmodel.show();
				that.maskTitle = '是否结算选中的商品?'
			},
			//结算与删除按钮
			deletegoods() {
				this.btnType = !this.btnType
				this.run = !this.run
			},
			async selThis(gIndex) { //选择商品
				var that = this;
				let cartlist = that.cartlist;
				const params = {
					id: cartlist[gIndex].id,
					selected: cartlist[gIndex].selected == 0 ? 1 : 0
				}
				const data =await EditSel(params)
				if(data.code==200){
					cartlist[gIndex].selected = params.selected;
					that.setAllSel();
				}else{
					uni.$u.toast(data.msg)
				}
			},
			setAllSel() { //是否全选
				let shopNum = 0;
				var selAll=true
				for (let i = 0; i < this.cartlist.length; i++) {
					if (this.cartlist[i].selected == 0) {
						selAll=false
						break
					}
				}
				this.allSel = selAll ? 1 : 0
				this.getAllMount();
			},
			async allSelBtn() { //全选
				var that = this;
				this.allSel = !this.allSel;
				var cartlist = that.cartlist;
				const params = {
					selected: this.allSel ? 1 : 0
				}
				const data =await EditSel(params);
				if(data.code==200){
					for (let i = 0; i < cartlist.length; i++) {
						if (this.allSel) {
							cartlist[i].selected = 1
						} else {
							cartlist[i].selected = 0
						}
					}
				}else{
					uni.$u.toast(data.msg)
				}
				// that.$emit('allSelBtn', cartlist);
				that.getAllMount();
			},
			getAllMount() { //计算选中总价
				var that = this;
				let allPrice = 0;
				let cartlist = that.cartlist;
				if (cartlist !== undefined) {
					for (let i = 0; i < cartlist.length; i++) {
						if (cartlist[i].selected == 1) {
							allPrice = allPrice + (cartlist[i].goods_num * cartlist[i].goods_price);
						}
					}
					that.allAmount = allPrice.toFixed(2);
				}
			},
			getCarIds() { //获取要结算的商品
				var that = this;
				var cartlist = that.cartlist;
				var haveSel = [];
				for (let i = 0; i < cartlist.length; i++) {
					if (cartlist[i].selected == 1) {
						haveSel.push(cartlist[i].id);
					}
				}
				let cartIds = haveSel.length>0 ? haveSel.join(',') : 0;
				return cartIds;
			},
			async valChange(e,gIndex) {
				const goods_id = this.cartlist[gIndex].goods_id
				const id = this.cartlist[gIndex].id
				this.cartlist[gIndex].disabled=1
				const params = {
					id: id,
					goods_id: goods_id,
					num: e.value
				};
				const data = await EditNum(params);
				if(data.code==200){
					this.cartlist[gIndex].goods_num=e.value
					this.cartlist[gIndex].selected=1
					this.setAllSel()
				}else{
					uni.$u.toast(data.msg)
				}
				setTimeout(() => {
					this.cartlist[gIndex].disabled=0
				}, 500)
			},
			//打开确认删除对话框
			openConfirm(type){
				var ids=this.getCarIds();
				if(ids==0){
					uni.$u.toast('请选择商品')
					return false
				}
				if(type==1){
					this.customTit="确认移至收藏夹?"
				}else{
					this.customTit="确认删除?"
				}
				this.delType=type
				this.show=true
			},
			//删除购物车商品
			async deleteConfirm() {
				var ids=this.getCarIds();
				const params = {
					ids
				}
				if(this.delType==1){
					var data = await MoveCart(params)
				}else{
					var data = await DelCart(params)
				}
				if(data.code==200){
					uni.$u.toast(data.msg)
					this.getcartlist();
				}else{
					uni.$u.toast(data.msg)
				}
				this.show = false;
			},
			wapperClick(item){
				if (this.user_id == 0){
					this.$u.route({
						url: 'pages/auth/login'
					})
				}else{
					this.jump('/pages/cart/show',item.goods_id)
				}
			},
			//路由跳转
			jump(url, id) {
				this.$u.route({
					url,
					params: {
						id
					}
				})
			},
			//跳转到确认订单页面
			orderto() {
				if (this.cartlist !== undefined) {
					this.$u.route({
						url: 'pages/center/order/Confirmorder',
						params: {
							action: 'cart',
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	@font-face {
		font-family: 'iconfont';
		/* project id 1143282 */
		src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot');
		src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.car-add:before {
		content: "\e8a6";
	}

	.car-sub:before {
		content: "\e8a7";
	}

	.car-no:before {
		content: "\e64d";
	}

	.car-unsel:before {
		content: "\e63a";
	}

	.car-sel:before {
		content: "\e639";
	}

	.car-del:before {
		content: "\e622";
	}

	.car-count {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
		.u-status-bar{
			height: calc(var(--status-bar-height) + 20rpx);
		}
		.cart_font {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			height: 90rpx;
			font-size: 32rpx;
			color: #1D1D1D;
			box-shadow: 0px 3px 8rpx 0 rgba($color: #999999, $alpha: 0.2);
			.cart_text1 {
				font-size: 26rpx;
				color: #1D1D1D;
			}
		}
		.inner{
			height: calc(100% - (var(--status-bar-height) + 20rpx) - 90rpx);
			overflow-y: scroll;
			padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			.goods_list {
				.u-empty-container{
					padding-top: 50rpx;
					margin-bottom: 20rpx;
					.chooseBtn{
						margin-top: 20rpx;
					}
				}
				.goods_list_text2 {
					font-size: 26rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
					text-align: center;
				}
				.body_flex {
					
				}
			}
		}
	}
	.cart_text_1 {
		width: 50rpx;
		margin: 0 10px;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.manage-btn {
		width: 100%;
		height: 75rpx;
		background: #FFFFFF;
		text-align: right;
	}

	.manage-btn text {
		font-size: 30rpx;
		color: #FF4362;
		line-height: 75rpx;
		padding: 0 24rpx;
	}

	.car_list_text3 {
		display: flex;
		flex-direction: row;
	}

	.car-list {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: $global-shade;
		padding: 0 20rpx;
		margin-bottom: 120rpx;
		.body_bottom_2 {
			display: flex;
			padding:20rpx 0;
			position: relative;
			&:not(:last-child){
				border-bottom: 1px solid #F6F7FB;
			}
			.cart_left {
				margin-right: 20rpx;
				align-self: center;
				font-size: 36rpx;
			}
			.car-unsel{
				color: #525252;
			}
			.car-sel{
				color: $theme-color;
			}
			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
			}
			.car-right{
				flex: 1; 
				display: flex; 
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				.car-right-top{
					.u-line-1{
						font-size: 28rpx; 
						color: #151517;
					}
					.bot_two_name {
						font-size: 20rpx;
						color: #BCBCBC;
						background-color: #F6F7FB;
						padding: 5rpx 20rpx;
						border-radius: 20rpx;
						display: inline-block;
						margin-top: 5rpx;
					}
				}
				.car-right-bot{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.bot_bot_one {
						color: #FF4362;
						font-size: 24rpx;
						text{
							font-size: 30rpx;
						}
					}
					.cart_add {
						
					}
				}
			}
		}
	}

	.cart_coupon {
		background-color: #FBEFF3;
		color: #F35047;
		font-size: 24rpx;
		padding: 0 16rpx;
		border-radius: 20px;
		line-height: 24px;
	}

	.bot_img {
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
	}
	.bot_bot_two {
		flex: 1;
		font-size: 18rpx;
		color: #BCBCBC;
		text-decoration: line-through;
	}

	.bottom_settle {
		display: flex;
		align-items: center;
		position: fixed;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		bottom: 0;
		/* #endif */
		height: 100rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px -3px 8rpx 0 rgba($color: #999999, $alpha: 0.2);
		.bottom_settle_div1 {
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 36rpx;	
			}
			.car-sel{
				color: $theme-color;
			}
			.all-text{
				margin-left: 10rpx;
				font-size: 30rpx;
			}
		}
		.bottom_settle_text {
			color: #525252;
		}
		
		.bottom_settle_text2 {
			font-size: 24rpx;
			color: #FF4362;
		}
		
		.bottom_settle_text3 {
			font-size: 36rpx;
			color: #FF4362;
			margin-right: 20px;
		}
		.bottom_settle_div2 {
			text {
				padding: 8rpx 50rpx;
				border-radius: 20px;
				background-color: #FF2C5F;
				font-size: 30rpx;
				color: #fff;
			}
		}
		.bottom_settle_div3 {
			.show_fixed_right {
				display: flex;
				align-items: center;
				.btn1 {
					height: 60rpx;
					background-color: #1f1f1f;
					color: #fff;
					font-size: 24rpx;
					border-top-left-radius: 30rpx;
					border-bottom-left-radius: 30rpx;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
					width: 180rpx;
					&::after{
						content: none;
					}
				}
				.btn2 {
					width: 180rpx;
					height: 60rpx;
					background-color: #FF626B;
					color: #fff;
					font-size: 24rpx;
					border-top-right-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					&::after{
						content: none;
					}
				}
			}
		}
	}

	.body_5 {
		margin: 0 0 20rpx 0;
		display: flex;
		flex-direction: column;
		/* height: 474rpx; */
		background: #fff;
		-webkit-transition: all .2s linear;
		/*渐变效果*/
		transition: all .2s linear;
		// box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
		overflow: hidden;
		position: relative;
	}

	.body_5 image {
		height: 254rpx;
		width: 100%;
	}

	.body_5_text {
		font-size: 24rpx;
		padding: 0 5px;
		margin: 5px 0 0 0;
	}

	.bot_5_one {
		font-size: 30rpx;
		color: #FF4362;
		margin: 10rpx 0 0 10rpx;
	}

	.bot_5_two {
		color: #BCBCBC;
		font-size: 22rpx;
		text-decoration: line-through;
		margin: 0 0 0 10rpx;
	}
.u-popup-slot {
		width: 100%;
		text-align: center;
		padding: 30rpx 0;
		.u-popup-slot_text {
			font-size: 28rpx;
			color: #525252;
		}
		.u-popup-slot_flex {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			.u-button{
				border-radius: 30rpx;
				height: 55rpx;
				width: 40%;
			}
			.btn1 {
				border: 1px solid #FF5666;
				background-color: #fff;
				color: #FF5666;
			}
			.btn2 {
				border: 1px solid #FF5666;
				background-image: linear-gradient(to right, #FF626B, #FF2C5F);
			}
		}
	}
</style>
